<template>
	<Container>
		<view
			class="box"
			v-for="(item, index) in assignment.articles"
			:key="index"
			:class="{ error: chooses[index] === 'error', articleLight: chooses[index] === 'success' }"
			hover-class="touch"
			hover-stay-time="100"
			@tap="tap(item, index)"
		>
			<view :style="{ background: 'url(' + item.backgroundUrl + ')0 0/100% 100%' }"><Article :articles="item.articles" /></view>
		</view>
		<Question :question="assignment.questionName" />
		<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import Article from '../article.vue'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	mixins: [mixins],
	components: { Article, AudioIcon, Question, Container },
	methods: {
		tap: function(item, index) {
			if (this.isComplete) return
			this.isComplete = true
			const status = item.isMatched ? 'success' : 'error'
			this.optionStatus(status, index)
			this.$parent.next({
				isSure: item.isMatched
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.box
	width 650rpx
	left 50%
	height 24vh
	transform translate3d(0, 0, 0)
	overflow hidden
	border-radius 70rpx
	border 12rpx solid #FCC77D
	box-sizing border-box
	transition all 0.3s
	margin 2vh 0
	view
		width 43.92vh
		height 24vh
		left 50%
		transform translateX(-50%)
		position relative
		transition all 0.3s
</style>
